<template>
  <div>
    <!-- 搜索栏 -->
    <van-search  placeholder="请输入景区名称" input-align="center"  v-model="value"   @search="onSearch" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(s,i) in data" :key="i" >
        <img :src="`http://localhost:3000${s.img}`" alt="">
      </van-swipe-item>
    </van-swipe>    
    <!-- 图标功能区 -->
    <div class="tu">
      <div @click="menpiao">
        <van-icon class="tubiao" size="40px" color="#00BB00" name="vip-card" />
        <p>门票</p>
      </div>
      <div @click="daoyou">
        <van-icon class="tubiao" size="40px" color="#0072E3" name="friends" />
        <p>导游</p>      
      </div>
      <div @click="gentuan">
        <van-icon class="tubiao" size="40px" color="#019858" name="todo-list" />
        <p>跟团游</p>        
      </div>
      <div @click="gonglve">
        <van-icon class="tubiao" size="40px" color="#FF44FF" name="comment" />
        <p>资讯</p>   
      </div>

    </div>
    <!-- 喇叭弹窗 -->
    <van-notice-bar
        left-icon="volume-o"
        text="通知: 疫情防控期间,所有游客进入景区需实名认证,
                来自高风险地区的游客需要提供七日内的来两次核算检测,点击。"
        background="#E0E0E0" color="#3C3C3C"  scrollable     
    />
       <!-- 热门目的地 -->
    <h1>热门推荐</h1>
    <ul class="rmtj">
      <li>
        <van-cell is-link @click="showPopup1">
          <img src="../assets/img/dld.jpg" alt="" />
          <p>黛螺顶</p>
        </van-cell>
        <van-popup
          round
          v-model:show1="show1"
          position="bottom"
          :style="{ height: '25%' }">
          <div class="xq">
黛螺顶，是五台山历史悠久，间名遐尔，别具一格的一座古利。黛螺顶，始名青峰，寺宇初名佛顶庵，明万历二十年到清代乾隆十五年，曾名大螺顶，乾隆十五年改名为黛螺顶，一直沿续至今。
          </div>
            
        </van-popup>
      </li>
      <li>
        <van-cell is-link @click="showPopup2"
          ><img src="../assets/img/xts.jpg" alt="" />
          <p>显通寺</p>
        </van-cell>
        <van-popup
          v-model:show2="show2"
          position="bottom"
          :style="{ height: '25%',}">
            位于塔院寺后，现存建筑为明清两代所修，寺宇面积八万余平方米，各种建筑四百余间。中轴线上殿堂七重，自前至后分别为观音殿、文殊殿、大雄宝殿、无梁殿、千钵文殊殿、铜殿、藏经殿。无梁殿来说，高达21米，没有一根梁木，全用砖块砌成，外檐砖刻斗拱花卉，内雕藻井悬空，形似花盖宝顶，建造奇特。
        </van-popup>
      </li>
      <li>
        <van-cell is-link @click="showPopup3">
          <img src="../assets/img/sxs.jpg" alt="" />
          <p>殊像寺</p>
        </van-cell>
        <van-popup
          v-model:show3="show3"
          position="bottom"
          :style="{ height: '25%' }">
            殊像寺，在山西五台山怀镇西南1公里处，殊像寺也是五台山五大禅林之一，因寺内供奉着文殊菩萨而得名。大殿面宽五间，进深三间，重檐
            九脊歇山顶，是五台山台怀中心区最大的殿宇。殿内正中佛台上供奉的文殊骑狮塑像，高近十米，是五台山诸寺中最高大的一尊
            文殊塑像文殊殿内的殿壁上还塑造了五百罗汉渡江的故事。
        </van-popup>
      </li>
    </ul>
    <!-- 热门线路 -->
    <div class="gang">
      <div></div>
      <div>热门线路</div>
    </div>
    <div class="luxian" >
      <!-- 第一层 -->
      <div >
        <div @click="gogowuche(remen.lid)" v-for="(remen,i)  in  remendata " :key="i">
          <img :src="`http://localhost:3000${remen.mp_pic}`" alt="">
          <p>{{remen.title}}</p>
          <p>￥{{remen.price}}</p>
          <p>销量:{{remen.spec}}</p>
        </div>               
      </div>
    </div>
  
 
    <template>
    <my-bottom style="margin-top:60px"/>
    </template>
  </div>
</template>

<script>
import MyBottom from '@/components/MyBottom.vue'
import { ref } from "vue";
  export default {
    setup() {
    const show1 = ref(false);const show2 = ref(false);const show3 = ref(false);
    const showPopup1 = () => {
      show1.value = true;
    }; 
    const showPopup2 = () => {
      show2.value = true;
    }; 
    const showPopup3 = () => {
      show3.value = true;
    };
    return {
      show1,
      show2,
      show3,
      showPopup1,
      showPopup2,
      showPopup3,
    };
  },
  name: "HomeView",
  components: {
    MyBottom,
  },

    data() {
      return {
        data: null,
        value:'',
          current: 0,
          remendata:''
      }
    },
  components: { MyBottom },
mounted(){
this.axios.get('http://127.0.0.1:3000/swipe').then(res=>{
  console.log(res.data.result)
  this.data=res.data.result
}),

//热们线路请求
this.axios.get('http://localhost:3000/hotmudi').then(res=>{
  console.log('热门线路',res)
  this.remendata=res.data.result
})
},

methods:{
   onSearch() {
      this.$store.commit('savesousuo',this.value)
      this.$router.push('/sousuo/'+ this.value)
    },

       onChange(index) {
      this.current = index;
    },
   
      gogowuche(lid){
            this.$router.push({
          path:'/porduct',
          query:{
            id:lid
          }
        })
      },
      // 跳转
      menpiao(){
      this.$router.push('/menpiao')        
       
      },
      daoyou(){
        this.$router.push('/daoyou')
      },
      gentuan(){
        this.$router.push('/gentuan')
      },
      gonglve(){
        this.$dialog.alert({
   title: '五台山开发小组通知',
    message:'您好各地彭于晏分晏，以及各地迪丽热巴分巴，该模块还在开发中哦请耐心等待'
  })
      }
      }

  }
</script>

<style scoped src='../assets/css/HomeView.css'></style>

<style src="../assets/css/main.css"></style>
